<template>
  <div v-loading="data.mtloading">
    <div>
      <machinetop :info="data.info" @onstatus="getSingle" />
    </div>

    <div class="app-container" v-if="!data.mtloading">
      <el-tabs
        v-model="data.activeName"
        class="demo-tabs"
        @tab-change="tabChange"
      >
        <el-tab-pane
          v-for="(item, index) in listShow"
          :key="index"
          :label="item.label"
          :name="item.name"
        />
        <el-tabs
				v-if="isLangTab"
					v-model="editableTabsValue"
					type="card"
					:class="locale == 'en'?'demo-tabsLang_en demo-tabsLang':'demo-tabsLang'"
					@tab-change="onTabLang"
				>
				<el-tab-pane
        :disabled="!data.info.m_id"
				v-for="item in tabLangList"
				:key="item.lang"
				:label="locale == 'en'? item.lang == 'zh-cn'?$t('message.DefaultData'): item.lang: item.name"
				:name="item.lang"
				>
				</el-tab-pane>
				</el-tabs>
      </el-tabs>

      <div v-if="data.activeName == 'overview'">
        <summarize
          :info="data.info"
          :find="data.find"
          @onRefreshSim="onRefreshSim"
        />
      </div>

      <div v-if="data.activeName == 'channel'">
        <channel :info="data.info" :find="data.find"/>
      </div>

      <div v-if="data.activeName == 'goods'">
        <goods :info="data.info" />
      </div>

      <div v-if="data.activeName == 'category'">
        <category :info="data.info" />
      </div>

      <div v-if="data.activeName == 'config'">
        <config
          :info="data.info"
          @investigate="edit"
          :isField="isField"
          :machineLangList="data.machineLangList"
          @submitLang="submitLang"
		      @mcId="mcId"
		      :btmodify="data.btmodify"
          @delLang="delconfigLang"
        />
      </div>

      <div v-if="data.activeName == 'help'">
        <help :info="data.info" :find="data.find" @submitLang="submitLang" :machineLangList="data.machineLangList" @delLang="delLang"/>
        <!-- <help
          :info="data.info"
          @investigate="edit"
          :isField="isField"
          :machineLangList="data.machineLangList"
          @submitLang="submitLang"
          @delLang="delLang"
        /> -->
      </div>
      <div v-if="data.activeName == 'info'">
        <info
          :info="data.info"
          @investigate="edit"
          :isField="isField"
          :machineLangList="data.machineLangList"
          @submitLang="submitLang"
          @delLang = "delLang"
        />
      </div>
      <div v-if="data.activeName == 'gmGoods'">
        <gmGoods
          :info="data.info"
          @investigate="edit"
          @gmInject="gmInject"
          :key="gmKey"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t: $t, locale } = useI18n();
import machinetop from "../../common/machine_top.vue";
import summarize from "../../common/summarize.vue";
import channel from "../../common/machine_channel.vue";
import goods from "../../common/machine_goods.vue";
import config from "../../common/machine_config.vue";
import help from "../../common/machine_help.vue";
import info from "../../common/machine_info.vue";
import category from "../../common/machine_category.vue";
import gmGoods from "../../common/machine_gmGoods.vue";
import getPlevel from "@/utils/level";
import {
  getmachineFind,
  getmachineinfoFind,
  updatemachine,
  getListLang,
  addLang,
  updateLang,
  addconfiLang,
  updateconfiLang,
  getFindconfiLang,
  getListconfiLang,
  gethelpList,
  addhelpList,
  updatehelpList
} from "@/api/machine";
import { useRoute } from "vue-router";
import auth from "@/utils/auth";
import { getlang } from "@/api/manage";
const tabLangList = ref([]);
const list = [
  {
    label: $t("machine.overview"),
    name: "overview",
    auth: "/management/machine.machine_info/getFind",
  },
  {
    label: $t("machine.channels"),
    name: "channel",
    auth: "/management/machine.machine_channel/getList",
  },
  {
    label: $t("machine.products"),
    name: "goods",
    auth: "/management/machine.machine_goods/getList",
  },
  {
    label: $t("machine.categorySort"),
    name: "category",
    auth: "/management/machine.machine_goods/getGcSort",
  },
  {
    label: $t("machine.config"),
    name: "config",
    auth: "/management/machine.machine_config/getFind",
  },
  {
    label: $t("machine.help"),
    name: "help",
    auth: "/management/machine.machine_help/getList",
  },
  {
    label: $t("machine.machineMsg"),
    name: "info",
    auth: "/management/earth.country/getCountriesList",
  },
  // { label: '组合商品配置', name: 'gmGoods', auth: '/management/earth.country/getCountriesList' },
];
const listShow = computed(() => {
  return list.filter((item) => {
    return auth.check(item.auth);
  });
});
let editableTabsValue = ref('zh-cn')
let gmKey = ref(0);
const route = useRoute();
let data = reactive({
	btmodify:false,
  mcId:'',
  rowLang: "",
  LangList: [],
  machineLangList: [],
  mtloading: true, // 加载
  info: {}, // 设备主体信息
  find: {}, // 设备信息
  activeName: "overview", // 标签名称
});
let isField = ref(false);
let isLangTab = computed(() => {
  return (
    data.activeName == "info" ||
    data.activeName == "config"
  )
});
let mcId = (mcId)=>{
	data.mcId = mcId
}
// 设备配置删除
let delconfigLang = ()=>{
  findListconfiLang(data.rowLang)
}
// 设备帮助、设备信息删除
let delLang = ()=>{
  infoLang()
  if(data.activeName == "help"){
    getSingle();
    getmacinfo();
  }
}
// 切换语言tab
let onTabLang =()=>{
  let query_obj = JSON.parse(decodeURI(route.query.l));
  if(editableTabsValue.value== 'zh-cn' && query_obj.type !== "help"){
      isField.value = false;
      data.machineLangList = [data.info]
      return
  }
  if(data.activeName == "config"){
		findListconfiLang(editableTabsValue.value)
	}else{
		data.machineLangList = data.LangList.filter(item => editableTabsValue.value == item.lang)
	}
	data.rowLang = editableTabsValue.value;
	isField.value = true;
}
let findListconfiLang =(lang:string)=>{
	getListconfiLang({ mc_id: data.mcId,lang:lang }).then((res) => {
      if (res.state == 200) {
        data.machineLangList = res.data;
      }
    })
}
// 语言列表
let infoLang = () => {
  let query_obj = JSON.parse(decodeURI(route.query.l));
  if (query_obj.type == "info") {
    getListLang({ m_id: query_obj.id }).then((res) => {
      if (res.state == 200) {
        data.LangList = res.data;
      }
    })
  }
  else if(query_obj.type == "help"){
	  gethelpList({ m_id: query_obj.id }).then((res) => {
      if (res.state == 200) {
        data.LangList = res.data;
        data.machineLangList = data.LangList.filter(item => editableTabsValue.value == item.lang)
      }
    })
  }
}
infoLang()
// 语言添加、编辑保存
let submitLang = (parm: any, pagesType: number) => {
  let query_obj = JSON.parse(decodeURI(route.query.l));
  parm.lang = editableTabsValue.value||data.rowLang;
  // 设备信息
  if (pagesType == 1) {
    parm.m_id = query_obj.id;
    parm.machine_id = data.find && data.find.machine_id || '';
    addLang(parm).then((res) => {
      infoLang()
      ElMessage({
        message: $t("message.addSuccess"),
        type: "success",
      });
    });
  }
  if (pagesType == 2) {
    parm.ml_id = data.machineLangList[0].ml_id;
    updateLang(parm).then((res) => {
      infoLang()
      ElMessage({
        message: $t("message.modifySuccess"),
        type: "success",
      });
    });
  }
  // 设备配置
  if (pagesType == 3) {
    parm.m_id = query_obj.id;
	  parm.machine_id = data.find && data.find.machine_id || '';
    addconfiLang(parm).then((res) => {
		data.btmodify = true
    findListconfiLang(data.rowLang )
      ElMessage({
        message: $t("message.addSuccess"),
        type: "success",
      });
    });
  }
  if (pagesType == 4) {
    parm.mcl_id = data.machineLangList[0].mcl_id;
    updateconfiLang(parm).then((res) => {
		data.btmodify = true
    findListconfiLang(data.rowLang )
      ElMessage({
        message: $t("message.modifySuccess"),
        type: "success",
      });
    });
  }
  // 设备帮助
  if (pagesType == 5) {
	let parms = {
		m_id: query_obj.id,
		machine_id: data.find && data.find.machine_id || '',
		help_list:[parm]
	}
    addhelpList(parms).then((res) => {
      infoLang()
      ElMessage({
        message: $t("message.addSuccess"),
        type: "success",
      });
    });
  }
  if (pagesType == 6) {
    parm.mh_id = data.machineLangList[0].mh_id;
    let parmData = {
      help_list: [parm]
    }
    updatehelpList(parmData).then((res) => {
		data.btmodify = true
    infoLang()
      ElMessage({
        message: $t("message.modifySuccess"),
        type: "success",
      });
    });
  }
};
// tab语言列表
let findGetlang = () => {
  getlang({}).then((res) => {
    if (res.state == 200) {
      res.data.forEach(item=>{
        if(item.lang == 'zh-cn'){
          item.name = $t('message.DefaultData')
        }
      })
      tabLangList.value = res.data;
    }
  });
};
let onRefreshSim = () => {
  getSingle();
  getmacinfo();
};
// 刷新组合商品配置局部组件
let gmInject = () => {
  gmKey.value++;
};
// 获取设备单条信息
let getSingle = () => {
  if (route.query.l == undefined) {
    ElMessage({
      message: $t("message.invalidData"),
      type: "error",
    });
    return;
  }
  let query_obj = JSON.parse(decodeURI(route.query.l));
  data.activeName = query_obj.type || "overview";
  data.mtloading = true;
  getmachineFind({ m_id: query_obj.id })
    .then((res) => {
      data.mtloading = false;
      if (res.state == 200) {
        console.log(res.data);
        data.info = res.data;
        data.info.address = getaddress(data.info);
        data.info.onlinetime = getPlevel.gettime(data.info.last_online_time, 3);
      }
    })
    .catch((err) => {
      data.mtloading = false;
    });
};

let getmacinfo = () => {
  let query_obj = JSON.parse(decodeURI(route.query.l));
  getmachineinfoFind({ m_id: query_obj.id }).then((res) => {
    if (res.state == 200 && res && res.data) {
      data.find = res.data;
    }
  });
};

// 设备所在位置
let getaddress = (e) => {
  let address = "--";
  let countrys = e.country.cname + "(" + e.country.name + ")" || "";
  let state = e.city.cname + "(" + e.city.name + ")" || "";
  let citys = e.regions.cname + "(" + e.regions.name + ")" || "";
  let regions = e.state.cname + "(" + e.state.name + ")" || "";
  address = countrys + "" + state + "" + citys + "" + regions;
  return address;
};

// 修改设备信息
let edit = (e) => {
  updatemachine(e).then((res) => {
    if (res.state == 200) {
      ElMessage({
        message: $t("message.modifySuccess"),
        type: "success",
      });
      getSingle();
      return;
    }
    ElMessage({
      message: $t("message.networkFailed"),
      type: "error",
    });
  });
};

let tabChange = (e) => {
  let info = JSON.parse(decodeURI(route.query.l));
  info.type = e;
  route.query.l = encodeURI(JSON.stringify(info));
  editableTabsValue.value = 'zh-cn'
  isField.value = false
  infoLang()
};
findGetlang();
getSingle();
getmacinfo();
</script>
<style lang="scss" scoped>
.demo-tabsLang_en{
  width: 270px !important;
}
.demo-tabsLang {
  overflow-x: auto;
  width: 340px;
  float: right;
  .isActive {
    background-color: #409eff;
    color: #fff;
  }
  .tabsLang_item {
    cursor: pointer;
  }
}
.tabsLang {
  display: flex;
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #409eff;
  color: #fff;
}
// .el-tabs--card>.el-tabs__header{
// 	border-bottom: none ;
// }
// .el-tabs--right .el-tabs__content,
// .el-tabs--left .el-tabs__content {
//   height: 100%;
// }
</style>
